<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="icon" href="../../img/logoimg.png" type="image/ico">
  <style>
    .choose{
      background-color: #f99e01;
    }
    .common{
      background-color: #f1efef;
    }
    .big_text{
      font-size: larger;
      color: #0c0b0b;
    }
    .btnDiv{
      border: none;
      font-size: medium;
      /*     display: flex;
           align-items: center;*/
      text-align: center;
      line-height: 28px;
      float: left;
      width: 52px;
      height: 28px;
      border-radius: 28px;
    }
    a{text-decoration:none}
    /*鼠标点击前*/
    a:link {
      color: #313030;
    }
    /*鼠标点击过后*/
    a:visited {
      color: #313030;
    }
    /*鼠标悬停时*/
    a:hover {
      color:#f99e01;
    }

    /*鼠标点击中*/
    a:active {
      color:#313030;
    }
  </style>
</head>
<body>
<!-- 关闭按钮 -->
<span id="closeCatalog" hidden>
        <a href="javascript:closeCatalog()" style="float: right;margin: 2px 5px">
            <img src="../../img/icon/green_pixel_117.gif">
        </a>
</span>
  <h2>
    全部章节&nbsp;&nbsp;（共<th:block th:text="${b.books.size()}"></th:block>章）
    <span style="float: right;margin-right: 10%;background-color: #f1efef;width: 104px;height: 28px;border-radius: 28px;">
                  <button class="btnDiv choose" id="ascBtn" onclick="changeType(1)">正序</button>
                  <button  class="btnDiv common" id="descBtn" onclick="changeType(2)">倒序</button>
              </span>
  </h2>
  <div id="asc">
    <ul th:each="i:${#numbers.sequence(0,b.books.size()-1)}">
      <li style="float: left;width: 50%;list-style-type:none;height: 50px">
        <th:block>
            <a th:href="@{/book/queryChapterById(bcid=${b.books.get(i).bChapterid})}">
                <img th:if="${b.books.get(i).bchapternum>19&&!readFlag}" src="../../img/icon/green_pixel_31.gif">
            </a>
<!--            <a th:href="@{/book/queryChapterById(bcid=${b.books.get(i).bChapterid})}">-->
            <a href="javascript:void(0)">
                <img th:if="${b.books.get(i).bchapternum>19&&readFlag}" src="../../img/icon/green_pixel_108.gif">
            </a>
            <a th:if="${b.books.get(i).bchapternum>19&&!readFlag}" disabled th:text="${b.books.get(i).bChaptername}"></a>
            <a th:if="${b.books.get(i).bchapternum<=19||b.books.get(i).bchapternum>19&&readFlag}" th:href="@{/book/queryChapterById(bcid=${b.books.get(i).bChapterid})}" th:text="${b.books.get(i).bChaptername}"></a>
        </th:block>
      </li>
    </ul>
  </div>
  <div id="desc" hidden>
    <ul th:each="i:${#numbers.sequence(b.books.size()-1,0,-1)}">
      <li style="float: left;width: 50%;list-style-type:none;height: 50px">
        <th:block>
            <a th:href="@{/book/queryChapterById(bcid=${b.books.get(i).bChapterid})}">
                <img th:if="${b.books.get(i).bchapternum>19&&!readFlag}" src="../../img/icon/green_pixel_31.gif">
            </a>
            <!--            <a th:href="@{/book/queryChapterById(bcid=${b.books.get(i).bChapterid})}">-->
            <a href="javascript:void(0)">
                <img th:if="${b.books.get(i).bchapternum>19&&readFlag}" src="../../img/icon/green_pixel_108.gif">
            </a>
            <a th:if="${b.books.get(i).bchapternum>19&&!readFlag}" disabled th:text="${b.books.get(i).bChaptername}"></a>
            <a th:if="${b.books.get(i).bchapternum<=19||b.books.get(i).bchapternum>19&&readFlag}" th:href="@{/book/queryChapterById(bcid=${b.books.get(i).bChapterid})}" th:text="${b.books.get(i).bChaptername}"></a>
        </th:block>
      </li>
    </ul>
  </div>
</body>
<script>
  //修改正序倒序
  function changeType(type) {
    //1为正序按钮，2为倒序按钮
    if (type==1){
      //点击的内容该按钮改为橘色
      $("#ascBtn").attr("class","btnDiv choose");
      //另一个改为普通
      $("#descBtn").attr("class","btnDiv common");

      //把列表改为正序
      $("#asc").attr("hidden",false)
      $("#desc").prop("hidden",true);
    }else {
      //点击的内容该按钮改为橘色
      $("#descBtn").attr("class","btnDiv choose");
      //另一个改为普通
      $("#ascBtn").attr("class","btnDiv common");

      //把列表改为正序
      $("#asc").prop("hidden",true);
      $("#desc").prop("hidden",false);
    }
  }
</script>
</html>